<!-- 历史合同组件 -->
<template>
	<div>
		<vxe-table border show-overflow :data="historyContractTable" :column-config="{ resizable: false }" height="400px"
			size="mini">
			<vxe-column field="customManager" title="销售经理" width="70">
				<template #default="{ row }">
					<span>{{ row.customManager }}</span>
				</template>
			</vxe-column>
			<vxe-column field="gmtCreate" title="合同创建时间" width="125">
				<template #default="{ row }">
					<span>{{ row.gmtCreate }}</span>
				</template>
			</vxe-column>

			<vxe-column field="contractType" title="合同类型" width="70">
				<template #default="{ row }">
					<dict-tag :options="dict.type.contract_type" :value="row.contractType" />
				</template>
			</vxe-column>

			<vxe-column field="partyName" title="公司名称" width="230">
				<template #default="{ row }">
					<span>{{ row.partyName }}</span>
				</template>
			</vxe-column>

			<vxe-column field="partyCallName" title="联系人" width="70">
				<template #default="{ row }">
					<span>{{ row.partyCallName }}</span>
				</template>
			</vxe-column>

			<vxe-column field="partyCallPhone" title="联系电话" width="100">
				<template #default="{ row }">
					<span>{{ row.partyCallPhone }}</span>
				</template>
			</vxe-column>

			<vxe-column field="contractAmount" title="合同金额" width="80">
				<template #default="{ row }">
					<span>{{ row.contractAmount }}</span>
				</template>
			</vxe-column>

			<vxe-column field="sendDataTime" width="80" title="操作">
				<template #default="{ row }">
					<el-button @click="showPdfDialog(row)" type="text">查看合同</el-button>
				</template>
			</vxe-column>
		</vxe-table>
		<!-- 查看合同 -->
		<el-dialog :visible.sync="pdfDialog.show" title="查看合同" append-to-body>
			<div class="dialog-wrap">
				<div class="item-title">{{ pdfDialog.title }}</div>
				<div class="item-content-wrap">
					<el-scrollbar>
						<div class="item-content">
							<div class="pdf" id="pdfView"></div>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
props: {

}
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import { listInfo as listInfo2, openPDF, serviceItems, } from "@/api/contract/info";
export default {
	dicts: ["contract_type"],
	data() {
		return {
			pdfDialog: {
				show: false,
				title: "",
			},
			historyContractTable: [],
		}
	},
	methods: {
		//获取历史合同
		getHistoryContract(id) {
			console.log(id);
			listInfo2({ customId: id }).then((response) => {
				this.historyContractTable = response.rows;
			});
		},
		// 查看合同
		showPdfDialog(item) {
			this.pdfDialog.show = true;
			openPDF(item.contractCode).then((response) => {
				let blob = response;
				let blobURL = window.URL.createObjectURL(blob);
				this.pdfh5 = new Pdfh5("#pdfView", {
					pdfurl: blobURL,
				});
			});
		},
	}
}
</script>

<style></style>